<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { z } from '@vben/common-ui';
import { Card } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { RequestClient } from '@vben/request';

const formData = ref();
const title = ref();

// interface Props {
//   handleSubmit: (values: any) => void;
// }
// const props = defineProps<Props>();

const handleSubmit = () => {
  console.info('handleSubmit');
};

const [Modal, modalApi] = useVbenModal({
  confirmText: '保存',
  contentClass: 'p-10',
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    // props.handleSubmit(formData.value);
  },
  onOpened() {},
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      formData.value = modalApi.getData<{
        data: { record: TypeRecord };
      }>().data.record;
      title.value = modalApi.getData<{ data: { isEdit: boolean } }>().data
        .isEdit
        ? '编辑菜单'
        : '新增菜单';

      formApi.setState(() => ({
        schema: [
          {
            component: 'Select',
            componentProps: {
              options: [],
              placeholder: '请选择父级',
            },
            fieldName: 'parentId',
            label: '父级',
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入页面标识',
            },
            fieldName: 'pageIdentity',
            label: '页面标识',
            rules: z.string().min(1, { message: '请输入页面标识！' }),
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入菜单名称',
            },
            fieldName: 'menuName',
            label: '菜单名称',
            rules: z.string().min(1, { message: '请输入菜单名称！' }),
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入前台路径',
            },
            fieldName: 'frontEndPath',
            label: '前台路径',
            rules: z.string().min(1, { message: '请输入前台路径！' }),
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入path_name',
            },
            fieldName: 'menuName',
            label: 'path_name',
          },
          {
            component: 'UploadFile',
            fieldName: 'file',
            componentProps: {
              className: 'w-1/3',
              maxSize: 1024 * 1024 * 2,
              maxCount: 1,
              accept: 'image/*',
            },
            label: '默认图标',
          },
          {
            component: 'UploadFile',
            fieldName: 'file',
            componentProps: {
              className: 'w-1/3',
              maxSize: 1024 * 1024 * 2,
              maxCount: 1,
              accept: 'image/*',
            },
            label: '选中图标',
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入组件路径',
            },
            fieldName: 'component',
            label: '组件路径',
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入重定向',
            },
            fieldName: 'redirect',
            label: '重定向',
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入排序',
            },
            fieldName: 'orderNum',
            label: '排序',
          },
          {
            component: 'Input',
            componentProps: {
              placeholder: '请输入动作',
            },
            fieldName: 'action',
            label: '动作',
          },
          {
            component: 'RadioGroup',
            componentProps: {
              options: [
                {
                  label: '已上线',
                  value: 0,
                },
                {
                  label: '开发中',
                  value: 2,
                },
                {
                  label: '待弃用',
                  value: 1,
                },
              ],
            },
            fieldName: 'status',
            label: '状态',
          },
          {
            component: 'RadioGroup',
            componentProps: {
              options: [
                {
                  label: '菜单',
                  value: 0,
                },
                {
                  label: '按钮',
                  value: 1,
                },
              ],
            },
            fieldName: 'menuType',
            label: '类型',
          },
          {
            component: 'Switch',
            componentProps: {
              class: 'w-1/8'
            },
            fieldName: 'visible',
            label: '展示',
          },
        ],
      }));
    }
  },
});

const [Form, formApi] = useVbenForm({
  handleSubmit: handleSubmit,
  wrapperClass: 'grid-cols-1',
  layout: 'horizontal',
  commonConfig: {
    labelWidth: 60,
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  schema: [],
});
</script>
<template>
  <Modal :title="title">
    <Form />
  </Modal>
</template>

<style lang="scss" scoped>
.modalContent {
  padding: 20px;
}
</style>
